import { ISchema, useForm } from '@formily/react';
import { getBrowserLanguage } from '@inbiz/core';
import { Path } from '@formily/path';
import ColumnConfig from './ColumnConfig';
import { GlobalRegistry } from '@inbiz/core';
import { InputNumber, Select, Space, Switch } from 'antd';
import { Field } from '@formily/core';
import SortField from './sortField';

export const getMessage = (token: string, locales: { [key: string]: any }): string => {
  const lang = GlobalRegistry.getDesignerLanguage() || getBrowserLanguage();
  const locale = locales ? locales[lang] : lang;
  return Path.getIn(locale, token);
};
const searchReaction = {
  'x-reactions': {
    dependencies: ['.search'],
    when: '{{$deps[0] == true}}',
    fulfill: {
      state: {
        visible: true,
      },
      platform: 'web',
    },
    otherwise: {
      state: {
        visible: false,
      },
    },
  },
};
export const TableViewType = {
  tableView: {
    type: 'void',
    'x-component': 'CollapseItem',
    properties: {
      'x-component-props': {
        type: 'object',
        properties: {
          tableViewType: {
            type: 'string',
            enum: ['table', 'card'],
            'x-component': function ViewSelect(props: any) {
              const form = useForm();
              const tableViewType = form.query('*.tableViewType').take() as Field;
              const columnConfig = form.query('*.columnConfig').take() as Field;
              const onChange = (value: string) => {
                props.onChange(value);
                if (columnConfig) {
                  columnConfig.value = {
                    ...columnConfig.value,
                    tableValues: {
                      ...columnConfig?.value?.tableValues,
                      attrs: undefined,
                    },
                  };
                }
              };
              return (
                <Select
                  value={props.value}
                  onChange={onChange}
                  options={tableViewType?.dataSource}
                />
              );
            },
            'x-decorator': 'FormItem',
            'x-component-props': {
              defaultValue: 'table',
            },
            platform: 'web',
          },
        },
      },
    },
    platform: 'web',
  },
};
export const Table: { [key: string]: ISchema } = {
  previewMode: {
    type: 'boolean',
    enum: [false, true],
    default: false,
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    'x-component-props': {
      defaultValue: false,
    },
    platform: 'web',
  },
  align: {
    type: 'string',
    enum: ['left', 'right', 'center'],
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    'x-component-props': {
      defaultValue: 'left',
    },
    platform: 'web',
    'x-reactions': {
      dependencies: ['.tableViewType'],
      fulfill: {
        state: {
          visible: "{{$deps == 'table'}}",
        },
      },
    },
  },
  showLineNumber: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultChecked: true,
    },
    platform: 'web',
    'x-reactions': {
      dependencies: ['.tableViewType'],
      fulfill: {
        state: {
          visible: "{{$deps == 'table'}}",
        },
      },
    },
  },
  resizeColumnWidth: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': function ViewSwitch(props: any) {
      const onChange = (checked: boolean) => {
        props.onChange(checked);
      };
      return <Switch checked={props.value} onChange={onChange} />;
    },
    'x-component-props': {
      defaultChecked: true,
    },
    platform: 'web',
    'x-reactions': {
      dependencies: ['.tableViewType'],
      fulfill: {
        state: {
          visible: "{{$deps == 'table'}}",
        },
      },
    },
  },
  showPage: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultChecked: true,
    },
    platform: 'web',
  },
  pageRefresh: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultChecked: true,
    },
    platform: 'web',
    'x-reactions': {
      dependencies: ['.showPage'],
      fulfill: {
        state: {
          visible: "{{$deps == 'true'}}",
        },
      },
    },
  },
  autoLoad: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultChecked: true,
    },
  },
  search: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-component-props': {
      defaultChecked: 'true',
    },
  },
  saveSearch: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    default: false,
    'x-reactions': {
      dependencies: ['.search'],
      fulfill: {
        state: {
          hidden: "{{$deps != 'true'}}",
        },
      },
    },
    platform: 'web',
  },
  clickSearch: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    default: false,
    'x-reactions': {
      dependencies: ['.search', '.saveSearch'],
      fulfill: {
        state: {
          hidden: "{{$deps[0] != 'true' && $deps[1] != true}}",
        },
      },
    },
    platform: 'web',
  },
  searchExpanded: {
    type: 'string',
    enum: ['expanded', 'collapse'],
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    'x-component-props': {
      defaultValue: 'expanded',
    },
    platform: 'web',
    ...searchReaction,
  },
  expandedButton: {
    type: 'string',
    enum: ['hidden', 'visible'],
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    'x-component-props': {
      defaultValue: 'hidden',
    },
    platform: 'web',
    ...searchReaction,
  },
  searchButtonSize: {
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    enum: ['middle', 'large'],
    'x-component-props': {
      defaultValue: 'middle',
    },
    platform: 'web',
    ...searchReaction,
  },
  searchButtonPosition: {
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    enum: ['left', 'right', 'center'],
    'x-component-props': {
      defaultValue: 'right',
    },
    platform: 'web',
    ...searchReaction,
  },
  buttonRegion: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    platform: 'web',
  },
  buttonPosition: {
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    enum: ['left', 'right'],
    'x-component-props': {
      defaultValue: 'left',
    },
    'x-reactions': {
      dependencies: ['.buttonRegion'],
      fulfill: {
        state: {
          visible: "{{$deps == 'true'}}",
        },
      },
    },
    platform: 'web',
  },
  topBtnMorePopover: {
    default: 'wrap',
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    enum: ['fold' , 'wrap'],
    platform: 'web',
    'x-reactions': {
      dependencies: ['.buttonRegion'],
      fulfill: {
        state: {
          visible: "{{$deps == 'true'}}",
        },
      },
    }
  },
  searchPlacehoder: {
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'MultilingualInput',
    platform: 'wap',
  },
  rowSelection: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    platform: 'web',
  },
  selectBackColor: {
    type: 'boolean',
    default: true,
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-reactions': {
      dependencies: ['.rowSelection'],
      fulfill: {
        state: {
          visible: "{{$deps == 'true'}}",
        },
      },
    },
    platform: 'web',
  },
  dragSort: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    'x-reactions': {
      dependencies: ['.tableViewType'],
      fulfill: {
        state: {
          visible: "{{$deps == 'table'}}",
        },
      },
    },
    platform: 'web',
  },
  sortField: {
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': (props: any) => {
      return <SortField {...props} />;
    },
    'x-reactions': {
      dependencies: ['.dragSort', 'form.senior.soure.x-component-props.sourcetype'],
      fulfill: {
        state: {
          visible: "{{$deps[0] == true && $deps[1] == 'model'}}",
        },
      },
    },
    platform: 'web',
  },
  sortInterface: {
    type: 'object',
    'x-decorator': 'FormItem',
    'x-component': 'ApiQuery',
    'x-component-props': {
      isDatasource: false,
    },
    'x-reactions': {
      dependencies: ['.dragSort', 'form.senior.soure.x-component-props.sourcetype'],
      fulfill: {
        state: {
          visible: "{{$deps[0] == true && $deps[1] == 'api'}}",
        },
      },
    },
    platform: 'web',
  },
  showSortIcon: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    default: true,
    'x-reactions': {
      dependencies: ['.dragSort'],
      fulfill: {
        state: {
          visible: "{{$deps == 'true'}}",
        },
      },
    },
    platform: 'web',
  },
  showPosition: {
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    enum: ['left', 'right'],
    'x-component-props': {
      defaultValue: 'right',
    },
    default: 'right',
    'x-reactions': {
      dependencies: ['.showSortIcon'],
      fulfill: {
        state: {
          visible: "{{$deps == 'true'}}",
        },
      },
    },
    platform: 'web',
  },
  columnConfig: {
    type: 'object',
    'x-decorator': 'FormItem',
    'x-component': (props: any) => {
      return <ColumnConfig {...props} />;
    },
  },
  thumbnail: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
    default: false,
    platform: 'web',
    'x-reactions': {
      dependencies: ['.tableViewType'],
      fulfill: {
        state: {
          visible: "{{$deps == 'table'}}",
        },
      },
    },
  },
  thumbConfig: {
    type: 'object',
    'x-decorator': 'FormItem',
    'x-component': (props: any) => {
      return <ColumnConfig {...props} thumbnail={true} />;
    },
    'x-reactions': {
      dependencies: ['.thumbnail'],
      fulfill: {
        state: {
          hidden: "{{$deps != 'true'}}",
        },
      },
    },
    platform: 'web',
  },
  showPageType: {
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'Select',
    enum: ['list', 'thumbnail'],
    'x-component-props': {
      defaultValue: 'list',
    },
    'x-reactions': {
      dependencies: ['.thumbnail'],
      fulfill: {
        state: {
          hidden: "{{$deps != 'true'}}",
        },
      },
    },
    platform: 'web',
  },
};

export const TableStyle: { [key: string]: ISchema } = {
  showHeightRule: {
    type: 'string',
    default: 'adaption',
    'x-decorator': 'FormItem',
    'x-component': 'Radio.Group',
    enum: ['adaption', 'fixed'],
    platform: 'web',
  },
  height: {
    type: 'number',
    'x-decorator': 'FormItem',
    'x-component': (props: any) => {
      return (
        <Space direction="vertical">
          <InputNumber
            addonAfter="px"
            value={props.value}
            onChange={(value) => props.onChange(value)}
          />
        </Space>
      );
    },
  },
  rowHeight: {
    type: 'string',
    'x-decorator': 'FormItem',
    enum: ['middle', 'small', 'default'],
    'x-component': 'Select',
    'x-component-props': {
      defaultValue: 'default',
    },
    platform: 'web',
  },
  zebraEffect: {
    type: 'boolean',
    'x-decorator': 'FormItem',
    'x-component': 'Switch',
  },
  zebraEffectColor: {
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'ColorInput',
    'x-reactions': {
      dependencies: ['.zebraEffect'],
      fulfill: {
        state: {
          visible: "{{$deps == 'true'}}",
        },
      },
    },
  },
  tableHeaderColor: {
    type: 'string',
    'x-decorator': 'FormItem',
    'x-component': 'ColorInput',
  },
};

export const H5TableStyle: { [key: string]: ISchema } = {
  'style.borderRadius': {
    'x-component': 'BorderRadiusStyleSetter',
  },
};
